<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../fonts/iconfont/iconfont.css">
    <link rel="stylesheet" href="../09_swiper/swiper-bundle.min.css">
</head>
<body>
    <div class="box">
        <!-- 头部导航栏 -->
        <div class="index" id="nav">
            <ul>
                <img src="" alt="">
                <li><a href="./login.html">登录/注册</a></li>
                <li><a>消息中心</a></li>
                <li><a>收藏夹</a></li>
                <li><a>郑重声明</a></li>
                <li><a>帮助</a></li>
                <li><input type="text" value="输入商品名或货号"><button class="mybtn"><i class="iconfont icon-search"></i></button>
                    <div class="sous">
                        <ol>
                            <li>热门搜索</li>
                            <li>换一批</li>
                        </ol>
                        <ul>
                            <li>扫除</li>              
                            <li>起泡网</li>
                            <li>乳液</li>
                            <li>蜡烛</li>
                            <li>笔记本</li>
                            <li>衣架</li>
                            <li>薯条</li>
                            <li>化妆棉</li>
                        </ul>
                       </div>
                </li> 
                <li><i class="iconfont icon-cart"></i></li>
            </ul>
        </div>
       
        <div class="gg">
        <span>店铺公告</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>'因事件(疫情、洪灾)影响,部分地区发货配送延时公告</p></div>

        <!-- 轮播图 -->
        <div class="swiper-container">
             <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829379/67c59203-3fdd-4ac5-a946-4762efeac3e3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829380/94e16da2-b06d-43f6-97f2-9a75b4144c5f.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829375/fef223a3-db44-401c-84b2-216f1fe00142.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829381/aea61c23-f44c-4730-bfb2-19cb1fd12545.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829371/0b226219-89c8-48e2-8b32-3abae1f9293d.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms28304/868adf69-73eb-4034-8299-7fe1b446c563.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829361/1e0565c7-ec59-4245-8670-3f18bbe73239.jpg" alt=""></div>
           </div>
           <div class="swiper-pagination"></div>
           <!-- Add Arrows -->
           <div class="swiper-button-next"></div>
           <div class="swiper-button-prev"></div>
         </div>

         <div class="nrong">
             <div><p>特辑</p><a href="./list.html">查看更多</a></div>
          </div>    
          <div>
             <ul class="tji">
                 <li>
                     <div><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829328/651bac83-4361-4483-a77a-346c94b15e9b.jpg" alt=""></div>
                     <span>包包特辑</span>
                </li>
                 <li><div><img src="https://mujipywebblobstor.blob.core.chinacloudapi.cn/oms2324187/6bccf1ab-a7b8-4a41-9425-193db8b9626f.jpg" alt=""></div>
                    <span>MUJI WALKER</span></li>
                 <li><div><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829165/8f825be3-8a95-4344-b91b-773920ce9f7d.jpg" alt=""></div>
                    <span>MUJI IDEE</span></li>
                 <li><div><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms2829377/1c962fca-df04-43f3-9b0f-88b346b2d4bb.jpg" alt=""></div>
                    <span>折扣专区</span></li>
             </ul>
            </div>

            <!-- 首页需要渲染的内容html -->
            
            <div class="tiaow"><p>新商品</p><a href="./list.html">查看更多</a></div>
            <div class="nrongtwo">
                
             <ul class="content container">
                <li>
                  <div class="show">
                    <img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/440d7675-f9ff-4cd3-ba51-6594e450f619.jpg" alt="">
                    <span class="hot active"> HOT </span>
                    <span class="sale active"> SALE </span>
                  </div>
                  <div class="info">
                    <p class="title"> 商品介绍按时缴费的宫颈癌三缸发动机阿三哥发动机号按实际换个方式简单化股份见多识广数据大发家史蒂芬霍金阿三哥方式 </p>
                    <p>
                      折扣: 9
                    </p>
                    <p class="price">
                      <del class="old"> ￥ 200.00 </del>
                      <span class="current"> ￥ 100.00 </span>
                    </p>
                    <p>
                      <button>加入购物车</button>
                    </p>
                  </div>
                </li>
              </ul>
          </div> 
        
          <div class="tiaow"><p>产品</p><a href="./list.html">查看更多</a></div>

          <!-- 内容三  衣服杂货区域 -->
          <div class="nrong3"> 
              <p>衣服 杂货</p>
              <ul>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/78a33e1f-78e5-42db-9f58-b7937f7dd756.jpg"><span>女装</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/ef9cb3f3-e71c-46a7-9bda-3a38680955db.jpg"><span>男装</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms172/9cf58cdd-053e-49d0-b522-5ea0cfc387aa.jpg"><span>内衣</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms172/9cf58cdd-053e-49d0-b522-5ea0cfc387aa.jpg"><span>鞋包</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/e67d7e38-a665-482b-83ef-e06d6b4f0d78.jpg"><span>服饰杂物</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/5762c0f1-d517-4239-ae58-4b0c12a78d9c.jpg"><span>童装</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms172/b33a1c94-ef6d-4f6d-a477-33e5660d715e.jpg"><span>MUJI LABO</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/e67d7e38-a665-482b-83ef-e06d6b4f0d78.jpg"><span>IDEE WEAR</span></li>
              </ul>

              <p>生活 杂货</p>
              <ul>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/5ce1b2ec-5b10-401d-82fc-3a9a09d42221.jpg"><span>卫生&美容用品</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/3f182e94-840e-429b-b5dd-e9bfdb99d101.jpg"><span>纺织品</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/3f182e94-840e-429b-b5dd-e9bfdb99d101.jpg"><span>文具</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms172/d0855552-9e13-45ef-869e-0263855aa447.jpg"><span>居家用品</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/1c799144-28b3-4515-80a1-1d91d2da85fb.jpg"><span>家居</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/ee801a5e-2664-4d49-b5fa-609bc4d09e20.jpg"><span>电子产品</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/54ce96a5-e89f-4ced-95b2-887d9fa8f49e.png"><span>户外用品</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms172/25a23c4f-980e-49b4-bb10-d4e758908c7f.jpg"><span>IDEE WEAR</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/f71a4c14-6c55-4f67-9c66-0b4a19ff1028.jpg"><span>IDEE BOOKS</span></li>
              </ul>
         </div>
         <div class="nr">
              <p>食品</p>
              <ul>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/210ca92c-16f6-475f-badd-616d18c17952.jpg"><span>点心</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/78eaa806-d5ff-4f87-aafc-ae6e6b8bd430.jpg"><span>饮料</span></li>
                  <li><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms164/0eadda07-69af-400c-b29a-a35ece1546f4.jpg"><span>调味加工</span></li>
                  <li><span></span></li>
              </ul>
        </div> 

        <div class="tiaow"><p>视频</p><a href="./list.html">查看更多</a></div>
        <div class="yama">亚麻，自然的选择</div>
        <div class="spin">
            <video  autoplay="autoplay" controls="controls">
                <source src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms28306/de6f8e4e-982d-46a0-a665-471c462d2b64.mp4"></source>
            </video>
        </div>
         <!-- 底部 -->
        <div class="bottom">
            <div class="btm1">
                <ul>
                    <li>@ghavsh uqgsugs quuqgd.</li>
                    <li>营业执照</li>
                    <li>陆icp08182256</li>
                    <li>@无印良品上海商业有限公司</li>
                    <li>食品经营许可证</li>
                    <li>陆公安27813783273</li>
                    <li>地址：上海市</li>
                    <li>出版经营许可</li>
                    <li>上海供货商</li>
                </ul>
            </div>
        </div>

        <!-- 楼层导航 -->
        <div class="jqi"><img src=""></div>
        <div class="Back_top">
            <img src="" alt="向上滑动">
         </div>
    
      
    </div>


    <script src="../js/utils.js"></script>

    <script src="../jquery/jquery.min.js"></script>
    <script src="../09_swiper/swiper-bundle.min.js"></script>
    <script src="../js/index.js"></script>
      
        

</body>
</html>